/*======================================================================================*/
/*=================[ ]=================*/
/*=================[ !!!!!!!! CSS ADDED BY PUROHIT A !!!!!!!! ]=================*/
/*=================[ ]=================*/
/*======================================================================================*/
/* =========================== */
/* !! USE TO WEB SITE COLOR !! -
01. #000000 -
02. #ffffff -
03. #777777 -
04. #666666 -
05. #444444 -
06. #333333 -
07. #222222 -
- ---------------------------- -
08. #00adee -
09. #231f20 -
10. #7b7b7b -
11. #003c47 -
12. #f9f9f9 -
13. #bdbdbd -
14. #c7c7c7 -
*/
/* =========================== */
/* =========================== */
/* !! SITE PAGE USE !! -
01. Home -
02. Our Products -
03. Our Story -
04. Health & Happiness Blog -
*/
/* =========================== */
/* =========================== */
/* !! SITE OF CONTENT'S !!
01. Google font
02. Generated font
04. Site Global
03. Site Typography
05. Minify transition
06. Customize The Navbar
07. Footer
08. Cuttom Button
09. Form Input
10. Form Input Placeholder
11. All Page's Common Heading
12. All Page's Common Content Style
13. Hero Banner wrapper
14. Other Listing
15. Odd Even
15. Swisse Product
*/
/* =========================== */
/*==============================================*/
/* !!! GOOGLE FONT IMPORT !!! */
/*==============================================*/
@import url('60bcb8f5a5094ca8aec199293d62c09d.css');
/* -----------------------------
!! SITE ( " font-family: 'Lato', sans-serif; " ) FONT-WEIGHT !!
thin : 100 -
ex-light : 200 -
light : 300 -
regular : 400 -
medium : 500 -
semi-bold : 600 -
bold : 700 -
ex-bold : 800 -
black : 900 -
-------------------------------- */
/* ============================================== */
/* !! GENERATED FONT !! */
/* ============================================== */
@font-face {
font-family: 'BrandonGrotesque-Light';
src: url('../fonts/BrandonGrotesque-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-Light.otf') format('opentype'),
url('../fonts/BrandonGrotesque-Light.woff') format('woff'),
url('../fonts/brandongrotesque-light.ttf') format('truetype'),
url('../fonts/brandongrotesque-light.svg#brandongrotesque-light') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BrandonGrotesque-Regular';
src: url('../fonts/brandongrotesque-regular.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-Regular.otf') format('opentype'),
url('../fonts/BrandonGrotesque-Regular.woff') format('woff'),
url('../fonts/brandongrotesque-regular.ttf') format('truetype'),
url('../fonts/brandongrotesque-regular.svg#brandongrotesque-light') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BrandonGrotesque-Medium';
src: url('../fonts/brandongrotesque-medium.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-Medium.otf') format('opentype'),
url('../fonts/BrandonGrotesque-Medium.woff') format('woff'),
url('../fonts/brandongrotesque-medium.ttf') format('truetype'),
url('../fonts/brandongrotesque-medium.svg#brandongrotesque-medium') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BrandonGrotesque-Bold';
src: url('../fonts/brandongrotesque-bold.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-Bold.otf') format('opentype'),
url('../fonts/BrandonGrotesque-Bold.woff') format('woff'),
url('../fonts/brandongrotesque-bold.ttf') format('truetype'),
url('../fonts/brandongrotesque-bold.svg#brandongrotesque-black') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BrandonGrotesque-Black';
src: url('../fonts/brandongrotesque-black.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-Black.otf') format('opentype'),
url('../fonts/BrandonGrotesque-Black.woff') format('woff'),
url('../fonts/brandongrotesque-black.ttf') format('truetype'),
url('../fonts/brandongrotesque-black.svg#brandongrotesque-black') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chinese Font */
/* bold */
@font-face {
font-family: 'FZLTTHFW--GB1-0';
src: url('../fonts/fzltthfw--gb1-0.eot') format('embedded-opentype'),
url('../fonts/fzltthfw--gb1-0.woff') format('woff'),
url('../fonts/fzltthfw--gb1-0.ttf') format('truetype'),
url('../fonts/fzltthfw--gb1-0.svg#fzltthfw--gb1-0') format('svg');
font-weight: normal;
font-style: normal;
}
/* light */
@font-face {
font-family: 'FZLTXHFW--GB1-0';
src: url('../fonts/fzltxhfw--gb1-0.eot') format('embedded-opentype'),
url('../fonts/fzltxhfw--gb1-0.woff') format('woff'),
url('../fonts/fzltxhfw--gb1-0.ttf') format('truetype'),
url('../fonts/fzltxhfw--gb1-0.svg#fzltxhfw--gb1-0') format('svg');
font-weight: normal;
font-style: normal;
}
/* regular */
@font-face {
font-family: 'FZLTZHFW--GB1-0';
src: url('../fonts/fzltzhfw--gb1-0.eot') format('embedded-opentype'),
url('../fonts/fzltzhfw--gb1-0.woff') format('woff'),
url('../fonts/fzltzhfw--gb1-0.ttf') format('truetype'),
url('../fonts/fzltzhfw--gb1-0.svg#fzltzhfw--gb1-0') format('svg');
font-weight: normal;
font-style: normal;
}
/* new font upload date 20-08-2019 */
@font-face {
font-family: 'BrandonGrotesque-Light';
src: url('../fonts/brandongrotesque-light.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-Light.otf') format('opentype'),
url('../fonts/BrandonGrotesque-Light.woff') format('woff'),
url('../fonts/brandongrotesque-light.ttf') format('truetype'),
url('../fonts/brandongrotesque-light.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BrandonGrotesque-RegularItalic';
src: url('../fonts/brandongrotesque-regularitalic.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-RegularItalic.otf') format('opentype'),
url('../fonts/BrandonGrotesque-RegularItalic.woff') format('woff'),
url('../fonts/brandongrotesque-regularitalic.ttf') format('truetype'),
url('../fonts/brandongrotesque-regularitalic.svg#brandongrotesque-regularitalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BrandonGrotesque-MediumItalic';
src: url('../fonts/brandongrotesque-mediumitalic.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-MediumItalic.otf') format('opentype'),
url('../fonts/BrandonGrotesque-MediumItalic.woff') format('woff'),
url('../fonts/brandongrotesque-mediumitalic.ttf') format('truetype'),
url('../fonts/brandongrotesque-mediumitalic.svg#brandongrotesque-mediumitalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BrandonGrotesque-BoldItalic';
src: url('../fonts/brandongrotesque-bolditalic.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-BoldItalic.otf') format('opentype'),
url('../fonts/BrandonGrotesque-BoldItalic.woff') format('woff'),
url('../fonts/brandongrotesque-bolditalic.ttf') format('truetype'),
url('../fonts/brandongrotesque-bolditalic.svg#brandongrotesque-bolditalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BrandonGrotesque-Black';
src: url('../fonts/brandongrotesque-black.eot') format('embedded-opentype'),
url('../fonts/BrandonGrotesque-Black.otf') format('opentype'),
url('../fonts/BrandonGrotesque-Black.woff') format('woff'),
url('../fonts/brandongrotesque-black.ttf') format('truetype'),
url('../fonts/brandongrotesque-black.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/* ============================================= */
/* !!!! SITE GLOBAL STYLE CSS !!!! */
/* ============================================= */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
html, body {
margin: 0;
padding: 0;
font-family: 'BrandonGrotesque-Light';
font-size: 18px;
line-height: 26px;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
background: #ffffff;
color: #212121;
}
.swisse_hk_chinese {
font-family: 'FZLTXHFW--GB1-0';
}
body {
height: 100%;
width: 100%;
overflow-x: hidden;
}
.main__wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
img {
max-width: 100%;
}
a, .btn, button {
cursor: pointer;
}
a, a:hover, a:focus, a:active, button, button:hover, button:focus, input, input:hover, input:focus, select, select:hover, select:focus, textarea, textarea:hover, textarea:focus, .btn, .btn:hover, .btn:focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
text-decoration: none;
-webkit-text-decoration-skip: objects;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.form-control:focus, [type="text"]:focus, [type="email"]:focus, [type="checkbox"]:focus, [type="password"]:focus, [type="file"]:focus, [type="radio"]:focus, [type="submit"]:focus, [type="date"]:focus, [type="time"]:focus, [type="tel"]:focus, [type="search"]:focus, [type="button"]:focus, [type="number"]:focus, textarea:focus, select:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
/* ============================================= */
/* !!!! SITE TYPOGRAPHY CSS !!!! */
/* ============================================= */
p, li {
font-family: 'BrandonGrotesque-Light';
font-size: 18px;
line-height: 26px;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
margin: 0;
}
.swisse_hk_chinese p, .swisse_hk_chinese li {
font-family: 'FZLTXHFW--GB1-0';
}
h1, h2, h3, h4, h5, h6 {
font-family: 'BrandonGrotesque-Bold';
font-weight: 900;
font-style: normal;
}
.swisse_hk_chinese h1,
.swisse_hk_chinese h2,
.swisse_hk_chinese h3,
.swisse_hk_chinese h4,
.swisse_hk_chinese h5,
.swisse_hk_chinese h6 {
font-family: 'FZLTTHFW--GB1-0';
}
ul, ol {
font-family: 'BrandonGrotesque-Light';
font-weight: 300;
font-style: normal;
margin: 0;
padding: 0;
}
.swisse_hk_chinese ul, .swisse_hk_chinese ol {
font-family: 'FZLTXHFW--GB1-0';
}
h1 {font-size: 62px;}
h2 {font-size: 48px;line-height: 58px;}
h3 {font-size: 36px;line-height: 42px;}
h4 {font-size: 30px;line-height: 34px;}
h5 {font-size: 20px;line-height: 26px;}
h6 {font-size: 18px;line-height: 26px;}
/* ============================================= */
/* !!!! All MINIFY CSS !!!! */
/* ============================================= */
a:hover, a:focus {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.row::before,
.row::after {
display: none;
}
/* ============================================= */
/* !!!! CUSTOMIZE THE NAVBAR !!!! */
/* ============================================= */
.navbar__wrapper {
position: relative;
width: 100%;
z-index: 999;
}
.navbar {
background: #000000;
padding: 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar .navbar-brand {
padding: 16px 0;
margin: 0;
}
.navbar .navbar-brand img{
height: 37px;
}
.navbar-nav {
padding: 0;
}
.navbar .navbar-nav .nav-item {
margin: 0;
padding: 0 15px;
position: relative;
}
.navbar .navbar-nav .nav-item a {
position: relative;
font-family: 'BrandonGrotesque-Light';
font-size: 18px;
line-height: 26px;
letter-spacing: 0;
color: #c0c0c0;
padding: 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.swisse_hk_chinese .navbar .navbar-nav .nav-item a {
font-family: 'FZLTXHFW--GB1-0';
}
.navbar .navbar-nav .nav-item a img {
width: 16px;
margin: 0 0 0 6px;
}
.navbar .navbar-nav .nav-item a i {
font-size: 12px;
margin: 0 0 0 5px;
}
/*
.navbar .navbar-nav .nav-item:first-of-type {
padding-left: 0;
}
.navbar .navbar-nav .nav-item:last-of-type {
padding-right: 0;
}
*/
/* !! :hover & :focus & active !! */
.navbar .navbar-nav .nav-item a:hover,
.navbar .navbar-nav .nav-item a:focus,
.navbar .navbar-nav .current-menu-item.nav-item a {
color: #ffffff;
}
.navbar .navbar-nav .country_select .nav-link {
font-size: 10px;
}
.navbar .navbar-nav .location_link .nav-link {
font-size: 12px;
}
.regionselect {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
background: #000000;
padding: 20px 25px;
margin: 0;
-webkit-transition: opacity 0.05s ease-out;
transition: opacity 0.05s ease-out;
width: 290px;
z-index: 9;
}
.regionselect.active {
opacity: 1;
visibility: visible;
}
.regionselect li {
margin: 0 0 10px 0;
list-style: none;
}
.navbar .navbar-nav .regionselect li img {
margin: -5px 15px 0 0;
width: 30px;
display: inline-block;
}
.regionselect li:last-child {
margin: 0;
}
/* ============================================= */
/* !!!! FOOTER !!!! */
/* ============================================= */
.footer__a {
position: relative;
background: #000000;
padding: 30px 0;
z-index: 2;
color: #ffffff;
font-size: 18px;
line-height: 20px;
}
.footer__a a,
.footer__a p {
color: #ffffff;
}
.footer__a a:hover,
.footer__a a:focus {
color: #c0c0c0;
}
.footer__brand img {
}
.footer__about ul li {
margin: 0 42px 0 0;
font-size: 14px;
}
.footer__about ul li:last-of-type {
margin-right: 0;
}
.footer__about ul li.opps_ques a {
font-size: 35px;
color: #c0c0c0;
width: 35px;
display: inline-block;
text-align: center;
line-height: normal;
}
.footer__a .copyright {
color: #ffffff;
font-size: 14px;
line-height: 22px;
}
.footer__navbar {
padding: 60px 0;
}
.footer__navbar .main_menu_label {
font-size: 14px;
margin: 0 0 22px 0;
text-transform: uppercase;
}
.footer__navbar ul li {
font-family: 'BrandonGrotesque-Medium';
margin: 0 0 20px 0;
min-height: 26px;
}
.swisse_hk_chinese .footer__navbar ul li{
font-family: 'FZLTZHFW--GB1-0';
}
.footer__navbar ul li a {
font-family: 'BrandonGrotesque-Light';
font-weight: 300;
}
.swisse_hk_chinese .footer__navbar ul li a {
font-family: 'FZLTXHFW--GB1-0';
}
/* ============================================= */
/* !!!! COMMON BUTTON STYLE !!!! */
/* ============================================= */
.btn-default {
font-family: 'BrandonGrotesque-Bold';
position: relative;
display: inline-block;
background: transparent;
color: #212121;
font-size: 20px;
line-height: normal;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0;
text-align: center;
-webkit-border-radius: 0;
border-radius: 0;
padding: 12px 92px 12px 20px;
margin: 0;
border: 1px solid #212121;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.swisse_hk_chinese .btn-default {
font-family: 'FZLTTHFW--GB1-0';
}
.btn-default::after {
content: '';
position: absolute;
right: 0;
width: 72px;
background-image: url(../fonts/arrow-pointing-to-right.svg);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 32px;
background-color: #212121;
top: 0;
bottom: 0;
z-index: 9;
}
/* !! :HOVER || :FOCUS || :ACTIVE !! */
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
background: transparent;
border: 1px solid #212121;
color: #212121;
}
.btn-default-white {
color: #ffffff;
border: 1px solid #ffffff;
}
.btn-default-white::after {
background-image: url(../images/arrow-pointing-to-right-black.svg);
background-color: #ffffff;
}
.btn-default:hover::after{
background-color: #f74126;
}
.btn-default-white:hover::after {
background-image: url(../images/arrow-pointing-to-right.svg);
}
/* !! :HOVER || :FOCUS || :ACTIVE !! */
.btn-default-white:hover,
.btn-default-white:focus,
.btn-default-white:active {
background: transparent;
border: 1px solid #ffffff;
color: #ffffff;
}
/* view more */
.btn-view-more {
border-color: #f2f2f2;
color: #ffffff;
padding: 12px 70px 7px 20px;
}
.btn-view-more::after {
background-image: url(../fonts/arrow-down.svg);
background-color: #f2f2f2;
width: 50px;
background-size: 15px;
}
/* !! :HOVER || :FOCUS || :ACTIVE !! */
.btn-view-more:hover,
.btn-view-more:focus,
.btn-view-more:active {
background: transparent;
border: 1px solid #f2f2f2;
color: #ffffff;
}
/* ============================================= */
/* !!!! COMMON FORM INPUT STYLE !!!! */
/* ============================================= */
/* ============================================= */
/* !!!! FORM INPUT PLACEHOLDER !!!! */
/* ============================================= */
/* ============================================================= */
/* !!!! ALL PAGE HEANDING COMMON STYLE CSS !!!! */
/* ============================================================= */
.page .hero_title, .hero_title {
font-size: 180px;
line-height: normal;
color: #ffffff;
margin: 0;
letter-spacing: 0.1em;
}
/* ==================================================== */
/* !!!! ALL PAGES COMMON STYLE CSS !!!! */
/* ==================================================== */
/* BANNER WRAPPER */
.banner__wrapper {
position: relative;
padding: 60px 0;
min-height: 465px;
background-color: #202020;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
.banner_hero_title {
font-size: 64px;
line-height: 72px;
letter-spacing: 1px;
color: #ffffff;
text-transform: uppercase;
margin: 0 0 18px 0;
}
.breadcrumb_wrapper + h1 {
margin-top: 46px;
}
.banner__wrapper h4 {
font-family: 'BrandonGrotesque-Bold';
color: #ffffff;
margin: 36px 0;
}
.swisse_hk_chinese .banner__wrapper h4 {
font-family: 'FZLTTHFW--GB1-0';
}
.banner__wrapper p {
color: #ffffff;
font-family: 'BrandonGrotesque-Regular';
}
.swisse_hk_chinese .banner__wrapper p {
font-family: 'FZLTZHFW--GB1-0';
}
/* breadcrumb_wrapper */
.breadcrumb_wrapper .breadcrumb {
-webkit-border-radius: 0;
border-radius: 0;
background: transparent;
padding: 0;
margin: 0;
}
.breadcrumb_wrapper li,
.breadcrumb_wrapper li.active,
.breadcrumb_wrapper li a,
.breadcrumb_wrapper .breadcrumb-item + .breadcrumb-item::before {
font-family: 'BrandonGrotesque-Regular';
color: #ffffff;
font-size: 16px;
line-height: 26px;
}
.breadcrumb_sec_wrapper li,
.breadcrumb_sec_wrapper li.active,
.breadcrumb_sec_wrapper li a,
.breadcrumb_sec_wrapper .breadcrumb-item + .breadcrumb-item::before{
color: #212121;
}
.swisse_hk_chinese .breadcrumb_wrapper li,
.swisse_hk_chinese .breadcrumb_wrapper li.active,
.swisse_hk_chinese .breadcrumb_wrapper li a,
.swisse_hk_chinese .breadcrumb_wrapper .breadcrumb-item + .breadcrumb-item::before{
font-family: 'FZLTZHFW--GB1-0';
}
/* Common Page Content wrapper */
.common__page__content {
position: relative;
background: #f2f2f2;
font-family: 'BrandonGrotesque-Regular';
}
.swisse_hk_chinese .common__page__content{
font-family: 'FZLTZHFW--GB1-0';
}
.common__page__content p {
color: #212121;
margin: 0 0 25px 0;
font-family: 'BrandonGrotesque-Regular';
}
.swisse_hk_chinese .common__page__content p{
font-family: 'FZLTZHFW--GB1-0';
}
.common__page__content ul, .common__page__content ol {
margin: 0 0 25px 0;
padding: 0 0 0 20px;
}
.common__page__content li{
font-family: 'BrandonGrotesque-Regular';
}
.swisse_hk_chinese .common__page__content li {
font-family: 'FZLTZHFW--GB1-0';
}
.common__page__content h2 {
color: #212121;
font-size: 64px;
line-height: 72px;
margin: 0 0 35px 0;
}
.common__page__content h6 {
font-family: 'BrandonGrotesque-Bold';
margin: 0 0 18px 0;
}
.swisse_hk_chinese .common__page__content h6{
font-family: 'FZLTTHFW--GB1-0';
}
.common__page__content img {
margin: 10px 0 35px 0;
}
.direct_link {
width: 60px;
height: 50px;
background: #202020;
display: inline-flex;
align-items: center;
justify-content: center;
}
.direct_link img {
margin: 0 auto;
}
/* pagination__wrapper */
.pagination__wrapper {
position: relative;
padding: 0 0 30px 0;
}
.pagination__wrapper ul li {
font-family: 'BrandonGrotesque-Regular';
font-size: 16px;
line-height: 22px;
color: #212121;
margin: 0 3px;
}
.swisse_hk_chinese .pagination__wrapper ul li {
font-family: 'FZLTZHFW--GB1-0';
}
.pagination__wrapper .page-item .page-link {
background-color: transparent;
border: 0;
padding: 0;
}
.pagination__wrapper .pagination .disabled svg path {
fill: #c0c0c0;
}
.pagination__wrapper ul .prev_pagi {
margin: 0 60px 0 0;
}
.pagination__wrapper ul .next_pagi {
margin: 0 0 0 60px;
}
/* card grid dark and white layout style css */
.card__wrapper .row [class*="col"] {
display: flex;
}
.card__box {
background: #ffffff;
border-bottom: 4px solid #202020;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 100%;
margin: 0 0 30px 0;
}
.card_box_body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.card_img {
background: #fafafa;
padding: 15px;
}
.card_img img {
height: 170px;
display: block;
margin: 0 auto;
}
.card_full_img {
height: 200px;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
.card_content {
padding: 18px;
}
.card_content h5 {
font-family: 'BrandonGrotesque-Bold';
margin: 5px 0 0 0;
}
.swisse_hk_chinese .card_content h5 {
font-family: 'FZLTTHFW--GB1-0';
}
.card__box .card_content .card_cate {
color: #ed3424;
font-size: 15px;
font-family: 'BrandonGrotesque-Bold';
min-height: 26px;
}
.swisse_hk_chinese .card__box .card_content .card_cate{
font-family: 'FZLTTHFW--GB1-0';
}
.card_content p {
font-family: 'BrandonGrotesque-Regular';
font-size: 16px;
line-height: 22px;
color: #202020;
margin: 10px 0 0 0;
}
.swisse_hk_chinese .card_content p {
font-family: 'FZLTZHFW--GB1-0';
}
/* card grid dark layout style css */
.card__box__dark {
background: #313131;
border-bottom: 4px solid #f2f2f2;
}
.card__box__dark .card_img {
background: #3c3c3c;
}
.card__box__dark .direct_link {
background: #f2f2f2;
}
.card__box__dark .card_content h5 {
color: #e6e6e6;
}
.card__box__dark .card_content p {
color: #aaaaaa;
}
/* card grid big layout style css */
.card__box__big .card_img {
padding: 35px;
}
.card__box__big .card_img img {
height: 210px;
}
/* Common odd even layout style css */
.common__page__content .old__even__wrapper .odd_even_gray * {
color: #ffffff;
}
.common__page__content .old__even__wrapper .odd_even_content_holder {
padding: 25px 58px;
}
.common__page__content .old__even__wrapper h2 {
font-size: 48px;
line-height: 58px;
margin: 0 0 18px 0;
}
/* ======================================== */
/* !!!! HERO BANNER WRAPPER !!!! */
/* ======================================== */
.hero__banner__wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #ffffff;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 1;
margin: 0;
padding: 0;
height: 93vh;
overflow: hidden;
}
.hero__banner__wrapper h4 {
font-family: 'BrandonGrotesque-Bold';
margin: 0;
color: #ffffff;
text-transform: uppercase;
}
.swisse_hk_chinese .hero__banner__wrapper h4 {
font-family: 'FZLTTHFW--GB1-0';
}
.hero__banner__wrapper h5 {
margin: 0;
font-family: 'BrandonGrotesque-Light';
font-weight: 300;
color: #ffffff;
/* font-size: 26px;*/
/* line-height: 32px;*/
text-transform: unset;
}
.swisse_hk_chinese .hero__banner__wrapper h5 {
font-family: 'FZLTXHFW--GB1-0';
}
#video-background {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 9;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.hero__banner__content {
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
}
.hero__banner__wrapper .scroll_point {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
display: inline-block;
width: 24px;
height: 34px;
margin: 0 auto;
border: 0.5px solid #ffffff;
border-radius: 10px;
}
.hero__banner__wrapper .scroll_point span {
-webkit-animation: sdb10 2s infinite;
animation: sdb10 2s infinite;
position: absolute;
top: 0;
}
.hero__banner__wrapper .scroll_point span::after {
position: absolute;
top: 10px;
right: -2px;
content: '';
width: 8px;
height: 1px;
background-color: #ffffff;
transform: rotate(45deg);
}
.hero__banner__wrapper .scroll_point span::before {
position: absolute;
top: 10px;
left: -2px;
content: '';
width: 8px;
height: 1px;
background-color: #ffffff;
transform: rotate(-45deg);
}
@-webkit-keyframes sdb10 {
0% {
-webkit-transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
-webkit-transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb10 {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
/* ======================================== */
/* !!!! OTHER LISTING WRAPPER !!!! */
/* ======================================== */
.other__list__wrapper {
position: relative;
background: #f2f2f2;
padding: 90px 0;
}
.other__list__wrapper .container-fluid {
padding: 0 80px;
}
.other_list_card {
text-align: center;
padding: 0;
}
.other_list_card .card-title {
min-height: 85px;
margin: 0 0 11px 0;
}
.other_list_card .btn-default {
margin: 52px auto 0;
}
.other_list_card .card-body {
padding: 0;
}
.other_list_card .card-footer {
padding: 0;
background: transparent;
border: 0;
}
/* ======================================== */
/* !!!! ODD EVEN WRAPPER !!!! */
/* ======================================== */
.old__even__wrapper {
position: relative;
padding: 64px 0;
background: #202020;
}
.odd_even_content_holder .head_tag {
font-size: 14px;
line-height: 22px;
}
.old__even__wrapper h2 {
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 38px;
}
.old__even__wrapper h2.small {
font-size: 40px;
}
.odd_even_white {
background: #ffffff;
}
.odd_even_black {
background: #000000;
}
.odd_even_gray{
background: #3a3f45;
}
.odd_even_holder * {
color: #ffffff;
}
.odd_even_white * {
color: #212121;
}
.odd_even_content_holder {
padding: 86px 50px 86px 90px;
height: 100%
}
.odd_even_content_holder_inner {
max-width: 520px;
}
.odd_even_holder .btn-default {
margin: 30px 0 0 0;
}
.odd_even_bg {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding: 50px 0;
}
.odd_even_bg .odd_even_content_holder {
padding: 0;
}
.odd_even_img_holder {
height: 100%;
}
.odd_even_bg .odd_even_holder img {
width: auto;
height: auto;
}
.odd_even_holder img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
margin: 0 auto;
}
/* ============================================== */
/* !!!! SWISSE PRODUCT WRAPPER !!!! */
/* ============================================== */
.swisse__product__wrapper {
position: relative;
padding: 40px 0;
/* min-height: 604px;*/
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
.swisse__product__wrapper * {
color: #ffffff;
}
.swisse__product__content .row + .row{
margin: 40px 0 0 0;
}
.swisse__product__wrapper p {
margin: 0 0 15px 0;
}
/* ======================================================= */
/* !!!! SWISSE PRODUCT CATEGORY PAGE !!!! */
/* ======================================================= */
.category__wrapper {
position: relative;
padding: 65px 0 35px 0;
background: #202020;
}
.product__wrapper {
position: relative;
padding: 60px 0 68px 0;
background: #f2f2f2;
}
.product_wrapper_head {
margin: 0 0 35px 0;
}
.product_wrapper_head h2 {
margin: 0 0 10px 0;
}
.find_out_wrap {
padding: 110px 0 0 0;
}
.find_out_wrap p {
font-family: 'BrandonGrotesque-Regular';
color: #e6e6e6;
letter-spacing: -0.27px;
margin: 0 0 48px 0;
}
.swisse_hk_chinese .find_out_wrap p{
font-family: 'FZLTZHFW--GB1-0';
}
.cate__blog__wrap [class*="col-"] {
display: flex;
}
.cate__blog__wrap .card__box__dark .card_content h5 {
font-size: 30px;
line-height: 38px;
}
/* ======================================================= */
/* !!!! SWISSE PRODUCT SINGLE PAGE !!!! */
/* ======================================================= */
.product__details__wrapper {
position: relative;
padding: 65px 0;
}
.product__details__wrapper h1 {
font-size: 48px;
line-height: 55px;
letter-spacing: 0.75px;
margin: 18px 0 40px 0;
}
.product__details__wrapper h4 {
font-size: 24px;
line-height: 30px;
margin: 0 0 20px 0;
font-family: 'BrandonGrotesque-Bold';
}
.swisse_hk_chinese .product__details__wrapper h4 {
font-family: 'FZLTTHFW--GB1-0';
}
.product__details__content {
padding: 0 50px 0 0;
}
.product__details__wrapper p, .product__details__wrapper h6 {
font-size: 16px;
line-height: 22px;
}
.product__details__wrapper p {
font-family: 'BrandonGrotesque-Regular';
margin: 0 0 18px 0;
}
.swisse_hk_chinese .product__details__wrapper p{
font-family: 'FZLTZHFW--GB1-0';
}
.product__details__wrapper h6 a{
color: #212121;
text-decoration: underline;
}
.product__details__wrapper h6 {
font-family: 'BrandonGrotesque-Bold';
}
.swisse_hk_chinese .product__details__wrapper h6 {
font-family: 'FZLTTHFW--GB1-0';
}
.product__details__wrapper ul li {
position: relative;
font-family: 'BrandonGrotesque-Bold';
font-size: 16px;
line-height: 22px;
text-transform: uppercase;
list-style: none;
margin: 11px 0 0 0;
padding: 0 0 0 33px;
}
.swisse_hk_chinese .product__details__wrapper ul li {
font-family: 'FZLTTHFW--GB1-0';
}
.product__details__wrapper ul li::before {
content: '';
background-image: url(../images/right-tick.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: -0.5px;
height: 23px;
width: 23px;
}
.product_information_point {
position: relative;
background: #000000;
padding: 4px 0;
}
.product__details__information .product_information_point * {
color: #a4a4a4;
font-family: 'BrandonGrotesque-Regular';
}
.product__details__information .product_information_point ul {
margin: 0;
padding: 0;
}
.swisse_hk_chinese .product__details__information .product_information_point * {
font-family: 'FZLTZHFW--GB1-0';
}
.product_information_point p{
font-size: 13px;
margin: 0 0 3px 0;
}
.product_information_point ul li a{
font-size: 16px;
margin: 0 26px 0 0;
}
.product_information_point ul li:last-child a{
margin-right: 0;
}
.product__details__information .benefits_wrapper,
.product__details__information .ingredients_wrapper,
.product__details__information .directions_wrapper,
.product__details__information .card__wrapper {
padding-top: 119px ;
}
.ingredients_accordion {
margin: 36px 0 0 0;
}
.ingredients_accordion .card,
.ingredients_accordion .card .card-header{
border: 0;
background: #fafafa;
}
.ingredients_accordion .card .card-header {
text-align: center;
}
.ingredients_accordion .card .card-header a {
color: #212121;
}
.ingredients_accordion .card .card-header h6{
margin: 0;
text-transform: uppercase;
}
.ingredients_accordion .card .card-header h6 i {
font-size: 14px;
margin: 0 0 0 10px;
transition: all 0.3s ease;
}
.ingredients_accordion .card.active .card-header h6 i {
transform: rotate(-180deg);
}
.ingredients_accordion .card-body {
padding: 36px 80px;
}
.ingredients_accordion .card-body .list-unstyled {
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: 0;
column-gap: 30px;
counter-reset: item-counter;
}
.ingredients_accordion .card-body ul li {
margin: 0 0 10px 0;
}
.ingredients_accordion .card-body ul li h6 {
margin: 18px 0;
}
.ingredients_accordion .card-body ul li:first-child h6 {
margin: 0 0 18px 0;
}
/* ============================================================= */
/* !!!! SWISSE INGREDIENTS OVERVIEW PAGE !!!! */
/* ============================================================= */
.ingredients__overview__wrapper {
position: relative;
padding: 67px 0 15px 0;
background: #202020;
}
.ingredients__overview__wrapper .ingredients_overview_head *,
.ingredients__overview__wrapper .ingredients__card__box * {
color: #e6e6e6;
}
.ingredients_overview_head {
padding: 0 0 15px 0;
}
.ingredients__card__box {
display: block;
text-align: center;
}
.ingredients__card__box .ingredients_card_cover {
height: 328px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.ingredients_card_content {
padding: 18px 0 48px 0;
}
.ingredients_card_content h4 {
font-size: 32px;
line-height: 36px;
}
.ingredients_card_content p {
margin: 0;
}
/* =========================================================== */
/* !!!! SWISSE INGREDIENTS SINGLE PAGE !!!! */
/* =========================================================== */
.ingredients__details__wrapper {
position: relative;
padding: 72px 0 80px 0;
background: #202020;
}
.ingredients__details__wrapper .ingredients__details__inner * {
color: #e6e6e6;
}
.ingredients__details__wrapper .ingredients_accordion .card,
.ingredients__details__wrapper .ingredients_accordion .card .card-header {
background: transparent;
}
.ingredients__details__wrapper .ingredients_accordion .card .card-header {
text-align: left;
padding: 0;
}
.ingredients__details__wrapper .ingredients_accordion .card-body {
padding: 36px 0;
}
.ingredients__details__wrapper .ingredients_accordion .card .card-header h6 {
font-size: 20px;
line-height: 30px;
}
.ingredients__details__content {
padding: 0 0 85px 0;
}
.ingredients__details__content img {
margin-top: 0;
}
.ingredients__details__content__right {
padding: 85px 0 0 40px;
}
.ingredients__details__content__bottom {
padding: 72px 0 0;
}
/* ================================================= */
/* !!!! SWISSE ABOUT US PAGE !!!! */
/* ================================================= */
.about__wrapper {
position: relative;
padding: 115px 0;
}
.about__wrapper .about__content p + h2 {
margin-top: 90px;
}
.about__wrapper h6 {
font-family: 'BrandonGrotesque-Medium';
margin: 0 0 10px 0;
}
.swisse_hk_chinese .about__wrapper h6 {
font-family: 'FZLTZHFW--GB1-0';
}
/* ================================================ */
/* !!!! SWISSE HISTORY PAGE !!!! */
/* ================================================ */
.history__wrapper {
position: relative;
background: #202020;
padding: 72px 0 0 0;
}
.history__wrapper .history__content * {
color: #e6e6e6;
}
.history__odd__even {
background: #8b8b8b;
position: relative;
margin: 47px 0 72px 0;
}
.history_odd_even_img {
height: 100%;
}
.history__odd__even img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
margin: 0 auto;
}
.history_odd_even_content {
padding: 85px 50px;
height: 100%;
}
.history__wrapper .history__content .history__odd__even:last-child {
margin-bottom: 0;
}
/* ================================================ */
/* !!!! SWISSE SCIENCE PAGE !!!! */
/* ================================================ */
.science__wrapper {
position: relative;
padding: 0 0 120px 0;
background: #202020;
}
.science__wrapper .old__even__wrapper {
padding: 0;
}
/* ================================================ */
/* !!!! SWISSE CONTACT PAGE !!!! */
/* ================================================ */
.contact__wrapper {
position: relative;
padding: 165px 0 125px 0;
}
.contact__details {
padding: 28px 0 0 0;
}
.contact_details_item {
background-color: #fafafa;
margin: 0 0 30px 0;
padding: 44px 30px;
}
.contact_details_item p {
font-size: 16px;
line-height: 22px;
margin: 0 0 14px 0;
font-family: 'BrandonGrotesque-Regular';
}
.swisse_hk_chinese .contact_details_item p {
font-family: 'FZLTZHFW--GB1-0';
}
.contact_details_item p:last-of-type {
margin: 0;
}
.contact_details_item p a{
font-size: 16px;
line-height: 22px;
color: #212121;
}
/* ================================================ */
/* !!!! SWISSE FAQ PAGE !!!! */
/* ================================================ */
.faq__wrapper {
position: relative;
padding: 72px 0 55px 0;
}
.accordion__holder .card {
border-radius: 0;
border: 0;
border-left: 2px solid #ed3424;
box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
margin: 0 0 18px 0;
background-color: #fafafa;
}
.accordion__holder .card-header {
/* height: 76px;*/
background-color: #fafafa;
border: 0;
padding: 26px 36px;
}
.accordion__holder .card-header a {
color: #212121;
font-family: 'BrandonGrotesque-Bold';
position: relative;
display: block;
padding: 0 20px 0 0;
}
.swisse_hk_chinese .accordion__holder .card-header a {
font-family: 'FZLTTHFW--GB1-0';
}
.accordion__holder .card-header a i {
position: absolute;
right: 0;
font-size: 13px;
top: 50%;
transform: translate(0%,-50%) rotate(0deg);
transition: all 0.3s ease;
}
.accordion__holder .card.active .card-header a i {
transform: translate(0%,-50%) rotate(-180deg);
}
.accordion__holder .card-body {
border-top: 1px solid #f2f2f2;
padding: 26px 36px 50px 36px;
font-family: 'BrandonGrotesque-Regular';
}
.swisse_hk_chinese .accordion__holder .card-body{
font-family: 'FZLTZHFW--GB1-0';
}
/* ======================================================== */
/* !!!! SWISSE AMBASSADORS PAGE !!!! */
/* ======================================================== */
.science__wrapper.ambassadors__wrapper {
padding: 0;
}
/* ======================================================== */
/* !!!! SWISSE BLOG OVERVIEW PAGE !!!! */
/* ======================================================== */
.blog__overview__wrapper {
position: relative;
padding: 110px 0 0 0;
}
.blog__overview__head {
position: relative;
padding: 0 0 47px 0;
}
.blog__overview__head h4 {
margin: 0 0 30px 0;
font-family: 'BrandonGrotesque-Bold';
}
.swisse_hk_chinese .blog__overview__head h4{
font-family: 'FZLTTHFW--GB1-0';
}
.blog__overview__head h2 {
letter-spacing: 1;
}
.blog__overview__filter {
padding: 0 0 36px 0;
}
.filter_holder {
height: 54px;
background-color: #fafafa;
}
.filter_holder span {
margin: 0 5px 0 0;
font-family: 'BrandonGrotesque-Regular';
}
.swisse_hk_chinese .filter_holder span{
font-family: 'FZLTZHFW--GB1-0';
}
.filter_holder p{
font-family: 'BrandonGrotesque-Regular';
margin: 0;
}
.swisse_hk_chinese .filter_holder p{
font-family: 'FZLTZHFW--GB1-0';
}
select.filter_select {
background-color: transparent;
font-family: 'BrandonGrotesque-Regular';
border: 0;
line-height: 22px;
padding: 0 20px 0 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
background-image: url(../images/down-arrow.svg);
background-position: right center;
background-repeat: no-repeat;
background-size: 15px;
}
.swisse_hk_chinese select.filter_select{
font-family: 'FZLTZHFW--GB1-0';
}
/* ====================================================== */
/* !!!! SWISSE BLOG SINGLE PAGE !!!! */
/* ====================================================== */
.blog__details__wrapper {
position: relative;
background: #202020;
}
.blog__details__wrapper .card__wrapper {
background: #f2f2f2;
padding: 72px 0 42px 0;
}
.blog__details__wrapper .blog__details__content *,
.blog__details__wrapper .blog__details__wrapper__head * {
color: #ffffff;
}
.blog__details__wrapper .blog__details__wrapper__head h1 {
color: #e6e6e6;
font-size: 64px;
line-height: 72px;
letter-spacing: 1px;
}
.blog__details__wrapper__head {
position: relative;
padding: 52px 0 0 0;
}
.blog__details__wrapper .blog__details__wrapper__head h6 {
margin: 32px 0 18px 0;
font-size: 15px;
line-height: 26px;
color: #ed3424;
}
.blog__details__wrapper .blog_meta_holder p {
margin: 0;
line-height: 30px;
color: #e6e6e6;
font-family: 'BrandonGrotesque-Regular';
}
.swisse_hk_chinese .blog__details__wrapper .blog_meta_holder p{
font-family: 'FZLTZHFW--GB1-0';
}
.blog__details__wrapper .blog_meta_holder .post_by_user { font-size: 16px;
}
.blog__details__wrapper .blog_meta_holder .meta_date { font-size: 13px;
}
.blog__details__wrapper .blog_meta_holder p {
margin: 0;
line-height: 30px;
font-size: 16px;
color: #e6e6e6;
}
.blog__details__wrapper .blog_share_holder ul li {
font-size: 24px;
font-family: 'BrandonGrotesque-Bold';
color: #e6e6e6;
text-transform: uppercase;
margin: 0 3px;
}
.swisse_hk_chinese .blog__details__wrapper .blog_share_holder ul li {
font-family: 'FZLTTHFW--GB1-0';
}
.blog__details__wrapper .blog_share_holder ul li a {
width: 24px;
height: 24px;
display: block;
font-size: 14px;
text-align: center;
}
.blog__details__wrapper .blog_share_holder ul li .facebook-item{
background: #3b5996;
}
.blog__details__wrapper .blog_share_holder ul li .linkedin-item{
background: #0078b4;
}
.blog__details__wrapper .blog_share_holder ul li .twitter-item{
background: #1fa0f1;
}
.blog__details__wrapper .blog_share_holder ul li .weixin-item{
background: #2cc001;
}
.blog__details__content {
position: relative;
padding: 52px 0;
}
.blog__details__content img {
margin: 15px 0 52px 0;
}
.blog__details__content h6{
font-family: 'BrandonGrotesque-Medium';
}
.swisse_hk_chinese .blog__details__content h6{
font-family: 'FZLTZHFW--GB1-0';
}
.blog__details__content ol {
padding: 0 0 0 20px;
margin: 0 0 25px 0;
}
.navbar .navbar-nav .nav-item .regionselect .inner ul li a{
font-size:12px;
}